import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from "@/assets/images/200.png";
import { DirectiveBinding } from 'vue';

// 图片懒加载自定义指令
export default {
  // Vue 提供了一个 DirectiveBinding 类型，可以用于自定义指令的 binding 参数。
  mounted (el: HTMLImageElement, binding: DirectiveBinding) {
    // 图片的懒加载逻辑
    // 参数1：回调函数
    // 参数2：可选的配置
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 停止监听
          stop()
          // 加载图片
          el.src = binding.value
          // 加载失败
          el.onerror = () => {
            // 设置默认图片
            el.src = defaultImg
          }
        }
      }
    )
  }
}